<template>
  <!--   紧急联系人-->
  <Table border :table-column="tableColumn" :table-data="tableData" :page="false" max-height="400px"
         :header-style="{backgroundColor:'#fffbed'}">
    <template slot="phone" slot-scope="{row}">
      <el-popover
          placement="right"
          width="120px"
          trigger="click">
        <SelectCallPhone :phone="row.phone" :modeType="modeType" modeKey="contact"
                         :orderId="routesQuery.orderId"/>
        <el-link slot="reference" :underline="false" type="primary">{{
            row.phone
          }}
        </el-link>
      </el-popover>
    </template>
  </Table>
</template>

<script>
import {urgentContacts} from '@/api/order'
export default {
  props: ['routesQuery'],
  name: "urgentContacts",
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('姓名'), align: 'center', prop: 'name', minWidth: 150},
        {label: this.$t('手机号码'), align: 'center', prop: 'phone', slot:'phone',minWidth: 150},
        {label: this.$t('关系'), align: 'center', prop: 'relation'},
        {label: this.$t('本地最后通话时间'), align: 'center', prop: 'localLastCallTime', minWidth: 150},
        {label: this.$t('本地通话次数'), align: 'center', prop: 'localCallNumber', minWidth: 150},
        {label: this.$t('运营商通话次数'), align: 'center', prop: 'callNumber', minWidth: 150},
        {label: this.$t('运营商最后通话时间'), align: 'center', prop: 'lastCallTime', minWidth: 150},
        {label: this.$t('是否黑名单'), align: 'center', prop: 'isBlacklist', minWidth: 150, isHtml: true},
        {label: this.$t('是否灰名单'), align: 'center', prop: 'isGreyList', minWidth: 150, isHtml: true},
      ],
    }
  },
  computed: {
    modeType() {
      return this.routesQuery.modeType || null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {userStubId} = this.routesQuery
      const res = await urgentContacts({
        userStubId: parseInt(userStubId)
      })
      if (res.code === 1) {
        this.tableData = res.data.map(item => {
          item.isBlacklist = item.isBlacklist === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          item.isGreyList = item.isGreyList === 1 ? `<span style="color: red">${this.$t('命中')}</span>` : this.$t('未命中')
          return item
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
